<template>
  <div>
    <van-button
      :icon="isCollected ? 'star' : 'star-o'"
      @click="collectFn"
      :loading:="collecting"
    >
    </van-button>
  </div>
</template>
<script>
import { collectedGoApi, collectedOutApi } from "@/api/article";
export default {
  model: {
    prop: "isCollected",
    event: "isCollectedFn",
  },
  props: {
    isCollected: Boolean,
    artId: {
      type: [Number, String],
    },
  },
  data() {
    return {
      collecting: false, //节流状态
    };
  },
  methods: {
    async collectFn() {
      try {
        //开启 加载中  实现 节流效果
        this.collecting = true;
        if (this.isCollected) {
          //取消收藏接口
          await collectedOutApi(this.artId);
          this.$toast.success("取消收藏");
          console.log("取消收藏");
        } else {
          //收藏接口
          await collectedGoApi(this.artId);
          this.$toast.success("收藏成功");
          console.log("收藏成功");
        }
        //关闭
        this.collecting = false;
        //修改收藏视图的状态
        this.$emit("isCollectedFn", !this.isCollected);
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style scoped lang="less">
/deep/.starbtn {
  background: #fff;
  border: 0px;
  color: #3a3a3a;
  .van-icon-star-o {
    color: #3a3a3a;
  }
  .van-icon-star {
    color: #ff9912;
  }
  .van-button--primary {
    background: #fff;
  }
}
</style>
